<template>
	<a-table
		:scroll="scroll"
		:columns="columns"
		:data-source="data"
		:pagination="pagination"
		:loading="loading"
		:row-key="(record, index) => index"
		:row-selection="rowSelection"
		:size="size"
		@change="handleTableChange"
		:expanded-row-keys.sync="expandedRowKeys"
	>
		<a-tooltip slot="id" slot-scope="text, record">
			<template slot="title">
				{{ record.status_show }}
			</template>

			<a-tag :color="record.status == 1 ? '#108ee9' : '#87d068'">
				<app-copy :value="record.id" />
			</a-tag>
		</a-tooltip>

		<template v-slot:map_area="{ map_area }">
			<a-tooltip
				:title="map_area ? map_area.name : undefined"
				placement="topLeft"
			>
				{{ map_area ? map_area.name : undefined }}
			</a-tooltip>
		</template>

		<template v-slot:name="{ name }">
			<a-tooltip :title="name" placement="topLeft">
				{{ name }}
			</a-tooltip>
		</template>

		<template v-slot:market_name="{ market_name }">
			<a-tooltip :title="market_name" placement="topLeft">
				{{ market_name }}
			</a-tooltip>
		</template>

		<template v-slot:address="{ address }">
			<a-tooltip :title="address" placement="topLeft">
				{{ address }}
			</a-tooltip>
		</template>

		<template slot="created_at" slot-scope="text, record">
			<span v-if="record.created_at">
				{{ formatDate(record.created_at) }}
			</span>
		</template>

		<template slot="action" slot-scope="text, record">
			<a @click="$emit('action', 'edit', record)" v-has="'merchant.update'"
				>编辑</a
			>
			<a-divider type="vertical" />
			<a @click="$emit('action', 'show', record)" v-has="'merchant.select'"
				>详情</a
			>
		</template>
	</a-table>
</template>

<script>
	export default {
		props: {
			columns: {
				type: Array,
				default: () => {
					return {}
				},
			},
			data: {
				type: Array,
				default: () => {
					return []
				},
			},
			pagination: {
				type: [Object, Boolean],
				default: () => {
					return false
				},
			},
			rowSelection: {
				type: Object,
				default: () => {
					return undefined
				},
			},
			loading: {
				type: Boolean,
				default: false,
			},
			size: {
				type: String,
				default: undefined,
			},
			scroll: {
				type: Object,
				default: () => {
					// return { x: 1200 }
					return undefined
				},
			},
		},
		data() {
			return {
				expandedRowKeys: [],
			}
		},
		methods: {
			formatDate(timeStr) {
				return this.$formatDate("Y-M-D h:m:s", +new Date(timeStr))
			},
			handleTableChange(pagination, filters, sorter) {
				this.$emit("change", pagination, filters, sorter)
			},
		},
	}
</script>

<style scoped>
	.tooltipLink {
		color: #fff;
	}
	.tooltipLink:hover {
		color: #1890ff;
	}
</style>
